<!DOCTYPE html>
<html lang="en">
<head>
    
    <meta charset="utf-8">
    <title>widgets/OverviewUtil.js - sss</title>
    
    <meta name="description" content="aaaa" />
    
        <meta name="keywords" content="cccc" />
        <meta name="keyword" content="cccc" />
    
    
    
    <meta property="og:title" content="arcgis4.x 简单的操作工具"/>
    <meta property="og:type" content="website"/>
    <meta property="og:image" content=""/>
    <meta property="og:site_name" content="CPC"/>
    <meta property="og:url" content="https://gitee.com/CPC1994/arcgis4.X"/>
    
    <script src="scripts/prettify/prettify.js"></script>
    <script src="scripts/prettify/lang-css.js"></script>
    <!--[if lt IE 9]>
      <script src="//html5shiv.googlecode.com/svn/trunk/html5.js"></script>
    <![endif]-->
    <link type="text/css" rel="stylesheet" href="styles/prettify.css">
    <link type="text/css" rel="stylesheet" href="styles/jsdoc.css">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
</head>
<body>

<input type="checkbox" id="nav-trigger" class="nav-trigger" />
<label for="nav-trigger" class="navicon-button x">
  <div class="navicon"></div>
</label>

<label for="nav-trigger" class="overlay"></label>

<nav class="wrap">
    
    <input type="text" id="nav-search" placeholder="Search" />
    
    <h2><a href="index.html">Home</a></h2><h3>Classes</h3><ul><li><a href="EchartLayer.html">EchartLayer</a><ul class='methods'><li data-type='method' style='display: none;'><a href="EchartLayer.html#init">init</a></li><li data-type='method' style='display: none;'><a href="EchartLayer.html#setBaseMap">setBaseMap</a></li><li data-type='method' style='display: none;'><a href="EchartLayer.html#setChartOption">setChartOption</a></li><li data-type='method' style='display: none;'><a href="EchartLayer.html#setVisible">setVisible</a></li><li data-type='method' style='display: none;'><a href="EchartLayer.html#refreshBegin">refreshBegin</a></li><li data-type='method' style='display: none;'><a href="EchartLayer.html#refreshing">refreshing</a></li><li data-type='method' style='display: none;'><a href="EchartLayer.html#refreshEnd">refreshEnd</a></li><li data-type='method' style='display: none;'><a href="EchartLayer.html#on">on</a></li><li data-type='method' style='display: none;'><a href="EchartLayer.html#off">off</a></li><li data-type='method' style='display: none;'><a href="EchartLayer.html#setCharts">setCharts</a></li><li data-type='method' style='display: none;'><a href="EchartLayer.html#createLayer">createLayer</a></li><li data-type='method' style='display: none;'><a href="EchartLayer.html#removeLayer">removeLayer</a></li><li data-type='method' style='display: none;'><a href="EchartLayer.html#startMapEventListeners">startMapEventListeners</a></li><li data-type='method' style='display: none;'><a href="EchartLayer.html#getE3CoordinateSystem">getE3CoordinateSystem</a></li></ul></li><li></li><li><a href="LayerUtil.html">LayerUtil</a><ul class='methods'><li data-type='method' style='display: none;'><a href="LayerUtil.html#lazyLoadingLayer">lazyLoadingLayer</a></li><li data-type='method' style='display: none;'><a href="LayerUtil.html#applyLayer">applyLayer</a></li><li data-type='method' style='display: none;'><a href="LayerUtil.html#applyMapImageLayer">applyMapImageLayer</a></li><li data-type='method' style='display: none;'><a href="LayerUtil.html#applyTileLayer">applyTileLayer</a></li><li data-type='method' style='display: none;'><a href="LayerUtil.html#applyFeatureLayer">applyFeatureLayer</a></li><li data-type='method' style='display: none;'><a href="LayerUtil.html#applySceneLayer">applySceneLayer</a></li><li data-type='method' style='display: none;'><a href="LayerUtil.html#applyElevationLayer">applyElevationLayer</a></li><li data-type='method' style='display: none;'><a href="LayerUtil.html#switchLayer">switchLayer</a></li><li data-type='method' style='display: none;'><a href="LayerUtil.html#getLayerByUniqueId">getLayerByUniqueId</a></li></ul></li><li></li><li><a href="ViewUtil.html">ViewUtil</a><ul class='methods'><li data-type='method' style='display: none;'><a href="ViewUtil.html#flyToPosition3D">flyToPosition3D</a></li><li data-type='method' style='display: none;'><a href="ViewUtil.html#flyToPoint2D">flyToPoint2D</a></li><li data-type='method' style='display: none;'><a href="ViewUtil.html#applyMapView">applyMapView</a></li><li data-type='method' style='display: none;'><a href="ViewUtil.html#removeMapView">removeMapView</a></li><li data-type='method' style='display: none;'><a href="ViewUtil.html#applySceneView">applySceneView</a></li><li data-type='method' style='display: none;'><a href="ViewUtil.html#removeSceneView">removeSceneView</a></li><li data-type='method' style='display: none;'><a href="ViewUtil.html#getMapStatus">getMapStatus</a></li><li data-type='method' style='display: none;'><a href="ViewUtil.html#getMap">getMap</a></li><li data-type='method' style='display: none;'><a href="ViewUtil.html#getMapViewMap">getMapViewMap</a></li><li data-type='method' style='display: none;'><a href="ViewUtil.html#getSceneViewMap">getSceneViewMap</a></li><li data-type='method' style='display: none;'><a href="ViewUtil.html#getView">getView</a></li><li data-type='method' style='display: none;'><a href="ViewUtil.html#getMapView">getMapView</a></li><li data-type='method' style='display: none;'><a href="ViewUtil.html#getSceneView">getSceneView</a></li><li data-type='method' style='display: none;'><a href="ViewUtil.html#bind2D_3D">bind2D_3D</a></li><li data-type='method' style='display: none;'><a href="ViewUtil.html#switchView">switchView</a></li><li data-type='method' style='display: none;'><a href="ViewUtil.html#addMapSwitchEvent">addMapSwitchEvent</a></li><li data-type='method' style='display: none;'><a href="ViewUtil.html#removeMapSwitchEvent">removeMapSwitchEvent</a></li></ul></li><li></li><li><a href="OverViewUtil.html">OverViewUtil</a><ul class='methods'><li data-type='method' style='display: none;'><a href="OverViewUtil.html#updateOverview">updateOverview</a></li><li data-type='method' style='display: none;'><a href="OverViewUtil.html#updateOverviewExtent">updateOverviewExtent</a></li><li data-type='method' style='display: none;'><a href="OverViewUtil.html#remove">remove</a></li><li data-type='method' style='display: none;'><a href="OverViewUtil.html#switchOverview">switchOverview</a></li><li data-type='method' style='display: none;'><a href="OverViewUtil.html#getOverViewMapId">getOverViewMapId</a></li></ul></li><li></li><li><a href="ScaleBarUtil.html">ScaleBarUtil</a><ul class='methods'><li data-type='method' style='display: none;'><a href="ScaleBarUtil.html#defaultStyle">defaultStyle</a></li><li data-type='method' style='display: none;'><a href="ScaleBarUtil.html#remove">remove</a></li></ul></li></ul><h3>Modules</h3><ul><li><a href="module-arcgisTools.html">arcgisTools</a><ul class='methods'><li data-type='method' style='display: none;'><a href="module-arcgisTools.html#~loadAPI">loadAPI</a></li></ul></li><li><a href="module-layer_layerManage.html">layer/layerManage</a><ul class='methods'><li data-type='method' style='display: none;'><a href="module-layer_layerManage.html#~switchLayers">switchLayers</a></li><li data-type='method' style='display: none;'><a href="module-layer_layerManage.html#~switchLayer">switchLayer</a></li><li data-type='method' style='display: none;'><a href="module-layer_layerManage.html#~lazyLoadingLayer">lazyLoadingLayer</a></li><li data-type='method' style='display: none;'><a href="module-layer_layerManage.html#~applyLayerByUrl">applyLayerByUrl</a></li><li data-type='method' style='display: none;'><a href="module-layer_layerManage.html#~applyLayerByConfig">applyLayerByConfig</a></li><li data-type='method' style='display: none;'><a href="module-layer_layerManage.html#~applyMapImageLayerByUrl">applyMapImageLayerByUrl</a></li><li data-type='method' style='display: none;'><a href="module-layer_layerManage.html#~applyMapImageLayerByConfig">applyMapImageLayerByConfig</a></li><li data-type='method' style='display: none;'><a href="module-layer_layerManage.html#~applyTileLayerByUrl">applyTileLayerByUrl</a></li><li data-type='method' style='display: none;'><a href="module-layer_layerManage.html#~applyTileLayerByConfig">applyTileLayerByConfig</a></li><li data-type='method' style='display: none;'><a href="module-layer_layerManage.html#~applyElevationLayerByUrl">applyElevationLayerByUrl</a></li><li data-type='method' style='display: none;'><a href="module-layer_layerManage.html#~applyElevationLayerByConfig">applyElevationLayerByConfig</a></li></ul></li><li><a href="module-view_viewManage.html">view/viewManage</a><ul class='methods'><li data-type='method' style='display: none;'><a href="module-view_viewManage.html#~flyToPosition3D">flyToPosition3D</a></li><li data-type='method' style='display: none;'><a href="module-view_viewManage.html#~flyToPoint2D">flyToPoint2D</a></li><li data-type='method' style='display: none;'><a href="module-view_viewManage.html#~applyMapView">applyMapView</a></li><li data-type='method' style='display: none;'><a href="module-view_viewManage.html#~removeMapView">removeMapView</a></li><li data-type='method' style='display: none;'><a href="module-view_viewManage.html#~removeSceneView">removeSceneView</a></li><li data-type='method' style='display: none;'><a href="module-view_viewManage.html#~applySceneView">applySceneView</a></li><li data-type='method' style='display: none;'><a href="module-view_viewManage.html#~getMapStatus">getMapStatus</a></li><li data-type='method' style='display: none;'><a href="module-view_viewManage.html#~getMap">getMap</a></li><li data-type='method' style='display: none;'><a href="module-view_viewManage.html#~getMapViewMap">getMapViewMap</a></li><li data-type='method' style='display: none;'><a href="module-view_viewManage.html#~getSceneViewMap">getSceneViewMap</a></li><li data-type='method' style='display: none;'><a href="module-view_viewManage.html#~getView">getView</a></li><li data-type='method' style='display: none;'><a href="module-view_viewManage.html#~getMapView">getMapView</a></li><li data-type='method' style='display: none;'><a href="module-view_viewManage.html#~getSceneView">getSceneView</a></li><li data-type='method' style='display: none;'><a href="module-view_viewManage.html#~bind2D_3D">bind2D_3D</a></li><li data-type='method' style='display: none;'><a href="module-view_viewManage.html#~switchView">switchView</a></li><li data-type='method' style='display: none;'><a href="module-view_viewManage.html#~addMapSwitchEvent">addMapSwitchEvent</a></li><li data-type='method' style='display: none;'><a href="module-view_viewManage.html#~removeMapSwitchEvent">removeMapSwitchEvent</a></li></ul></li><li><a href="module-widgets_widgetsManage.html">widgets/widgetsManage</a><ul class='methods'><li data-type='method' style='display: none;'><a href="module-widgets_widgetsManage.html#~addScaleBar">addScaleBar</a></li><li data-type='method' style='display: none;'><a href="module-widgets_widgetsManage.html#~removeScaleBar">removeScaleBar</a></li><li data-type='method' style='display: none;'><a href="module-widgets_widgetsManage.html#~addOverview">addOverview</a></li><li data-type='method' style='display: none;'><a href="module-widgets_widgetsManage.html#~getOverViewMapId">getOverViewMapId</a></li><li data-type='method' style='display: none;'><a href="module-widgets_widgetsManage.html#~removeOverview">removeOverview</a></li><li data-type='method' style='display: none;'><a href="module-widgets_widgetsManage.html#~switchOverview">switchOverview</a></li></ul></li></ul>
</nav>

<div id="main">
    
    <h1 class="page-title">widgets/OverviewUtil.js</h1>
    

    



    
    <section>
        <article>
            <pre class="prettyprint source linenums"><code>import {viewManage} from "../view/viewManage";
import {esri} from "../api/esriAPI";

/**
 * 概览图
 * @class
 * */
export const OverViewUtil = class {
  mainView = null;//主视图
  mapView = null;//概览图
  overviewDiv = null;//概览图的DOM对象
  maskDiv = null;//遮罩层的DOM对象
  _mapId = null;
  _maskId = null;
  mapId = null;//外部的mapId
  /**
   * 构造函数
   * @param {String} mapId 需要概览图的地图id
   * @param {Object}  map 需要概览图的地图对象
   * @param {Object} styles 样式，用于设置概览图的外框divDOM对象，和css设置样式一致
   */
  constructor(mapId, map, styles) {
    //构建概览图的DOM对象
    let {overviewDiv, maskDiv, _mapId, _maskId} = createOverviewDOM(mapId, styles);
    this.overviewDiv = overviewDiv;
    this.maskDiv = maskDiv;
    this._mapId = _mapId;
    this._maskId = _maskId;
    this.mapId = mapId;
    //获得主视图和构建概览图，同时监听
    let mainView = viewManage.getView(mapId);
    let mapView = viewManage.applyMapView(_mapId, map);
    this.mapView = mapView;
    this.mainView = mainView;
    mapView.ui.components = [];
    mapView.when(() => {
      //主视图的监听extent
      mainView.watch("extent", this.updateOverviewExtent.bind(this));
      //概览图的监听extent
      mapView.watch("extent", this.updateOverviewExtent.bind(this));
      // 主视图静止时更新小地图概述
      esri.watchUtils.when(mainView, "stationary", this.updateOverview.bind(this));
    })
  }

  /**
   * 更新概览图，其中:
   * 将MapView动画化为缩小比例，以便我们获得一个很好的概述。
   * 我们使用goTo的“progress”回调来更新动画时的概览范围
   */
  updateOverview() {
    let mapView = this.mapView;
    let mainView = this.mainView;
    mapView.goTo({
      center: mainView.center,
      scale:
      mainView.scale *
      2 *
      Math.max(
        mainView.width / mapView.width,
        mainView.height / mapView.height
      )
    });
  }

  /**
   * 更新概览图的extent，同时修改遮罩层的大小
   *
   * 通过将SceneView范围转换为更新概述范围
   * MapView屏幕坐标并更新extentDiv位置
   */
  updateOverviewExtent() {
    let mapView = this.mapView;
    let mainView = this.mainView;
    let extent = mainView.extent;
    let maskDiv = this.maskDiv;
    var bottomLeft = mapView.toScreen(
      new esri.Point({
        x: extent.xmin,
        y: extent.ymin,
        spatialReference: extent.spatialReference
      })
    );

    var topRight = mapView.toScreen(
      new esri.Point({
        x: extent.xmax,
        y: extent.ymax,
        spatialReference: extent.spatialReference
      })
    );

    maskDiv.style.top = topRight.y + "px";
    maskDiv.style.left = bottomLeft.x + "px";

    maskDiv.style.height = bottomLeft.y - topRight.y + "px";
    maskDiv.style.width = topRight.x - bottomLeft.x + "px";
  }

  /**
   * 移除概览图
   */
  remove() {
    console.log(this._mapId, this._maskId)
    viewManage.removeMapView(this._mapId);
    let mapDom = document.getElementById(this.mapId);
    mapDom.removeChild(this.overviewDiv);
  }

  /**
   * 切换概览图（显示和隐藏）
   * @param {Boolean} isShow 是否显示
   */
  switchOverview(isShow) {
    this.overviewDiv.style.display = isShow ? "" : "none";
    //  TODO 是否要同时移除监听，有待商榷
  }

  /**
   * 获得概览图的mapId
   * @returns {String} 概览图的mapId
   */
  getOverViewMapId() {
    return this._mapId;
  }
}

/**
 * 创建概览图的DOM对象
 *  @private
 * @param {String} mapId mapId
 * @param {Object} styles 样式，用于设置概览图的外框divDOM对象，和css设置样式一致
 * @returns {{_mapId: string, _maskId: string, overviewDiv: HTMLDivElement, maskDiv: HTMLDivElement}}
 */
function createOverviewDOM(mapId, styles = {}) {
  let _mapId = mapId + "概览图" + new Date().getTime();
  let _maskId = mapId + "遮罩层" + new Date().getTime();
  let mapIdNode = document.getElementById(mapId);
  //创建概览图层的DOM对象
  let overviewDiv = document.createElement("div");
  overviewDiv.id = _mapId;
  overviewDiv.style.width = "300px";
  overviewDiv.style.height = "300px";
  if (!styles["bottom"]) {
    overviewDiv.style.top = "10px";
  }
  overviewDiv.style.right = "10px";
  overviewDiv.style.backgroundColor = "#fff"
  overviewDiv.style.border = "1px dashed red"
  overviewDiv.style.position = "absolute";
  overviewDiv.style.overflow = "hidden";
  for (let key in styles) {
    console.log(key, styles[key])
    overviewDiv.style[key] = styles[key];
  }
  mapIdNode.appendChild(overviewDiv);
  //创建遮罩层的DOM对象
  let maskDiv = document.createElement("div")
  maskDiv.id = _maskId;
  maskDiv.style.position = "absolute";
  maskDiv.style.zIndex = 1;
  maskDiv.style.width = "30%";
  maskDiv.style.height = "30%";
  maskDiv.style.backgroundColor = "rgba(0,0,0,0.3)"
  overviewDiv.appendChild(maskDiv);
  return {
    _mapId,
    _maskId,
    overviewDiv,
    maskDiv
  }
}
</code></pre>
        </article>
    </section>




    
    
</div>

<br class="clear">

<footer>
    Documentation generated by <a href="https://github.com/jsdoc3/jsdoc">JSDoc 3.5.5</a> on Sat May 11 2019 22:54:19 GMT+0800 (GMT+08:00) using the <a href="https://github.com/clenemt/docdash">docdash</a> theme.
</footer>

<script>prettyPrint();</script>
<script src="scripts/polyfill.js"></script>
<script src="scripts/linenumber.js"></script>

<script src="scripts/search.js" defer></script>


<script src="scripts/collapse.js" defer></script>


</body>
</html>
